<!--
 * @Author: zhang_wenjuan
 * @Date: 2021-05-17 14:27:59
 * @LastEditTime: 2021-07-26 14:42:07
 * @Description: 数据抄录菜单
-->
<template>
    <div id="menu_page">
        <van-nav-bar title="设备数据登记" left-arrow fixed @click-left="back">
            <template slot="right">
                <div class="parent-circle">
                    <div class="child-circle"></div>
                </div>
            </template>
        </van-nav-bar>
        <!-- 选择变电站 -->
        <div class="border-10">
            <van-cell  is-link arrow-direction="down" :title="selectSub" @click="showSubStation = true"/>
        </div>
        <!-- 变电站下拉弹窗 -->
        <!-- <van-popup v-model="showSubPop" position="bottom">
            <van-picker show-toolbar :columns="subArr" value-key="subName" @confirm="confirmSub" @cancel="showSubPop = false" />
        </van-popup> -->
        <!-- 抄录类型区域 -->
        <!-- column-num 自定义列数 -->
        <div style="display: flex;padding: 10px 16px;">
            <span class="line_green"></span>
            <span>设备列表</span>   
        </div>
        <!-- gutter 设置格子之间的距离 -->
        <van-grid :column-num="2" :gutter="10">
            <!-- <van-grid-item  /> icon="photo-o" :text="item.name"-->
            <van-grid-item v-for="(item,i) of copyType" :key="i"  @click="toCopy(item)">
                <van-image :src="item.src" width="80" height="100"/>
                <span v-text="item.deviceTypeName" class="font14"></span>
            </van-grid-item>
        </van-grid>
        <!-- 变电站下拉弹窗 -->
        <van-popup v-model="showSubStation" position="bottom" style="height:100%;">
			<selSubstation @close="onClose" 
			@selected="selSubstationBtn">
			</selSubstation>
		</van-popup>
    </div>
</template>
<script type="text/javascript">
    import { getSubstationList } from '../../api/common';
	import selSubstation  from "@/components/SelectSubstation"
    import { getCopyConfigList } from '../../api/dataCopy';

export default {
    name: "copyMenu",
    components: {
       selSubstation
    },
    data() {
        return {
            // 是否显示变电站弹窗
            showSubPop:false,
            showSubStation:false,
            selectSub:"",
            subId:'',
            // 变电站列表
            subArr:[],
            //登录人的信息
            userInfo:JSON.parse(localStorage.getItem('userInfo')),
            //抄录项
            copyConfigList:[],
            // 抄录类型
            copyType:[],
        }
    },
    created(){
        

    },
    mounted() {
        this.getSubstation()
     
    },
    methods: {
        /**
         * 返回
         */
        back(){
            this.$router.push({
                    name: "MainHome"
                })
        },
        /**
        * @description: 关闭变电站
        */
        onClose() {
            this.showSubStation = false;
        },
        //变电站选中回调
        selSubstationBtn(sub) {
            this.showSubStation = false;
            this.subId = sub.substationId;
            this.selectSub = sub.substationName;
            // this.queryNewTourTask();
            this.getCopyConfig();
        },
        /**
         * 获取变电站
         */
        getSubstation(){
            var self = this
            var info = {
                keyword: "",
                orgId: self.userInfo.orgId,
                roleCode: "",
                userId: self.userInfo.userId
            }
            getSubstationList(info).then(res=>{
                if(res.success == true){
                    self.subArr = res.data
                    self.selectSub=res.data[0].subName
                    self.subId = res.data[0].id
                    self.getCopyConfig()
                }else{
                    console.log(res.msg)
                }
            }).catch(err=>{
                console.log('查询变电站失败')
            })
        },

        /**
         * 获取变电站下抄录项
         */
        getCopyConfig(){
            var self = this
            self.copyConfigList =[]
            self.copyType =[]
            var info = {
                deviceType:"",
                pageNum: 1,
                pageSize: 10,
                roleCode: "",
                substationId: self.subId,
                userId: self.userInfo.userId
            }
            getCopyConfigList(info).then(res=>{
                if(res.success == true){
                    if(res.data.length == 0) return self.$Toast.fail('无设备类型');
                    self.copyConfigList = res.data
                    for(var i = 0;i < self.copyConfigList.length; i++){
                        if(res.data[i].deviceType == "0501001"){
                            self.copyConfigList[i].title = "BatteryCopy",
                            self.copyConfigList[i].src = require("../../../../assets/devType/xdc.jpg"),
                            self.copyType.push( self.copyConfigList[i])
                        }else if(res.data[i].deviceType == "0301"){
                            self.copyConfigList[i].title = "ZhubianCopy",
                            self.copyConfigList[i].src = require("../../../../assets/devType/zb.png"),
                            self.copyType.push( self.copyConfigList[i])
                        }else if(res.data[i].deviceType == "0313"){
                            self.copyConfigList[i].title = "ZhubianCopy",
                            self.copyConfigList[i].src = require("../../../../assets/devType/dlhgq.png"),
                            self.copyType.push( self.copyConfigList[i])
                        }else if(res.data[i].deviceType == "0305"){
                            self.copyConfigList[i].title = "ZhubianCopy",
                            self.copyConfigList[i].src = require("../../../../assets/devType/dlq.png"),
                            self.copyType.push( self.copyConfigList[i])
                        }else if(res.data[i].deviceType == "0318"){
                            self.copyConfigList[i].title = "ZhubianCopy",
                            self.copyConfigList[i].src = require("../../../../assets/devType/blq.png"),
                            self.copyType.push( self.copyConfigList[i])
                        }else if(res.data[i].deviceType == "0306"){
                            self.copyConfigList[i].title = "ZhubianCopy",
                            self.copyConfigList[i].src = require("../../../../assets/devType/glkg.png"),
                            self.copyType.push( self.copyConfigList[i])
                        }else if(res.data[i].deviceType == "0314"){
                            self.copyConfigList[i].title = "ZhubianCopy",
                            self.copyConfigList[i].src = require("../../../../assets/devType/dyhgq.png"),
                            self.copyType.push( self.copyConfigList[i])
                        }else if(res.data[i].deviceType == "0303"){
                            self.copyConfigList[i].title = "ZhubianCopy",
                            self.copyConfigList[i].src = require("../../../../assets/devType/zyb.png"),
                            self.copyType.push( self.copyConfigList[i])
                        }else if(res.data[i].deviceType == "0312"){
                            self.copyConfigList[i].title = "ZhubianCopy",
                            self.copyConfigList[i].src = require("../../../../assets/devType/dkq.png"),
                            self.copyType.push( self.copyConfigList[i])
                        }
                        // else{
                        //     self.copyConfigList[i].title = "ZhubianCopy",
                        //     self.copyConfigList[i].src = require("../../../../assets/devType/drq.png"),
                        //     self.copyType.push( self.copyConfigList[i])
                        // }
                    }
                    console.log(self.copyType)
                }else{
                    console.log(res.msg)
                }
            }).catch(err=>{
                console.log('查询设备类型失败')
            })
        },

        /**
         * 跳转至抄录页面
         * @param  {Object} item  当前所点击的抄录类型对象
         */
        toCopy(item){
            var self = this
            self.$router.push({
                name: item.title,
                params:{
                    substationId:self.subId,
                    deviceTypeId:item.deviceType,
                    deviceTypeName:item.deviceTypeName,
                    copyConfigId:item.copyConfigId
                    }
            });
        },
        
        /**
         * 确认选择变电站
         */
        confirmSub(val){
            this.selectSub=val.subName
            this.subId = val.id
            this.getCopyConfig()
            // 弹窗关闭
            this.showSubPop = false
        },
    },
    watch:{
        taskList(){
            
        }
    },
    filters: {
        
    }
}
</script>
<style scoped>
#menu_page {
    width: 100%;
    height: 100%;  
    padding-top: 46px; 
    padding-bottom: 0;
    background: #F5F6FA;
}
.van-grid{
    height: calc(100% - 173px);
    overflow: auto;
    justify-content: space-between;
    padding: 10px 0 10px 10px;
}
.van-nav-bar {
    background: #17b49b;
}
.van-nav-bar /deep/ .van-icon {
    color: #fff;
    font-size: 22px;
}
.van-nav-bar /deep/ .van-nav-bar__title {
    color: #fff;
    font-size: 18px;
}
.border-10{
    padding: 10px;
}
.border-10 .van-cell{
    border: 1px solid #fff;
    border-radius: 50px;
}
</style>